<!--
 * @Descripttion: 机构的编辑和新增
 * @version: 
 * @Author: wl
 * @Date: 2020-06-04 11:37:36
 * @LastEditors: wl
 * @LastEditTime: 2020-06-08 18:09:28
--> 
<template>
  <div class="editPage">
    <div class="dialog-content">
      <el-form
        class="formContent"
        :model="data"
        :rules="dataRule"
        ref="dataForm"
        label-width="100px"
        style="text-align: left"
      >
        <el-form-item label="ID" v-if="false">
          <el-input v-model="data.Id"></el-input>
        </el-form-item>
        <el-form-item v-if="data.id > 0" label="序号" prop="start">
          <span>{{ data.id }}</span>
        </el-form-item>
        <el-form-item label="组名称：" prop="name">
          <el-input v-model="data.name" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="请选择">
          <el-select v-model="data.CODES" multiple placeholder="请选择" filterable>
            <el-option
              v-for="item in options"
              :key="item.CID"
              :label="item.name"
              :value="item.CID"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <div class="dialogFooter">
      <el-button type="primary" @click="handleSave">保存</el-button>
      <el-button @click="handleCancel">取消</el-button>
    </div>
  </div>
</template>
<script>
export default {
  name: "edit-page",
  props: {
    /* 表单数据 */
    data: {
      type: Object,
      default: function () {
        return {
          GID: "",
          name: "",

          show: false,
          CODES: [],
          tagArr: [],
        };
      },
    },
  },
  data() {
    return {
      /* 表单验证 */
      tags: [],
      codes: "",
      GID: "",
      getTokenGID: "",
      inputVisible: false,
      dataRule: {
        addClick: [
          {
            pattern: /^0{0,1}(13[0-9]|15[7-9]|153|156|18[7-9])[0-9]{8}$/,
            message: "手机号格式不对",
            trigger: "blur",
          },
        ],
      },
      options: [],
      value1: [],
    };
  },
  methods: {
    handleSave: function () {
      this.$refs.dataForm.validate((valid) => {
        if (valid) {
          this.$confirm("确认提交吗？", "提示", {}).then(() => {
            this.editLoading = true;

            // this.data.CODES = this.tags;
            // let paramsAdd = {
            //   GID: this.data.GID ? this.data.GID : this.getTokenGID
            // };
            let paramss = Object.assign({}, this.data);

            // let params = Object.assign({}, this.data);
            let paramm = {
              rows: paramss,
              where: { GID: this.data.GID },
            };
            var aaa = JSON.stringify(paramm);
            this.$api.dept.save(aaa).then((res) => {
              if (res.code == 0) {
                this.$message({
                  message: "操作成功 ",
                  type: "success",
                });
                this.$emit("clickCancel");
              } else {
                this.$message({
                  message: "操作失败, " + res.msg,
                  type: "error",
                });
              }
            });
          });
        }
      });
    },
    //删除
    handleClose(tag) {
      this.tags.splice(this.tags.indexOf(tag), 1);
    },
    handleInputConfirm() {
      let codes = this.codes;
      if (codes) {
        Array.isArray(this.tags)
          ? this.tags.push(this.codes)
          : (this.tags = [this.codes]);
      }
      this.inputVisible = false;
      this.codes = "";
    },
    showInput() {
      this.inputVisible = true;
      this.$nextTick((_) => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },
    //新增code
    CodeSave: function () {
      Array.isArray(this.tags)
        ? this.tags.push(this.codes)
        : (this.tags = [this.codes]);

      // console.log(this.tags, "ttt");
      this.codes = "";
    },
    addCodes() {
      let params = {
        CODE: this.tags,
      };
      this.$http.post(this.$ports.permission.addCodes, params).then((res) => {
        if (res.code == 0) {
          this.$message({
            message: "操作成功 ",
            type: "success",
          });
        } else {
          this.$message({
            message: "操作失败, " + res.msg,
            type: "error",
          });
        }
      });
    },
    getCommunity() {
      let params = {
        where: { CODES: this.data.CODES },
      };
      let param = JSON.stringify(params);

      this.$api.dept.getCommunityList(param).then((res) => {
        if (res.code == 0) {
          this.options = res.data;
        } else {
          this.$message({
            message: "操作失败, " + res.msg,
            type: "error",
          });
        }
      });
    },
    initData(data) {
      this.tags = data.CODES;

      if (data.GID) {
        this.GID = data.GID;
      } else {
        this.GID = -1;
      }
    },
    /* 取消编辑 */
    handleCancel: function () {
      this.$emit("handqCancel");
    },
  },
  mounted() {
    this.initData(this.data);

    this.getCommunity();

    // console.log(this.data, "dddddccccc");
  },
};
</script>
<style lang="scss" scoped>
.dialogFooter {
  width: 30%;
  margin: 0 auto;
  padding: 10px;
}
.formContent {
  width: 60%;
  padding-top: 30px;
  margin: 0 auto;
}
</style>